<template>
  <div class="employees-container">
    <div class="app-container">
      <!-- 通用工具栏组件使用 -->
      <page-tools>
        <!-- 自定义左侧内容 -->
        <template #slot-left>
          <span>共 {{ total }} 条记录</span>
          <span>已删除 {{ toadd }} 条记录</span>
        </template>

        <!-- 自定义右侧内容 -->
        <template #slot-right>

          <el-button v-points="'import'" type="danger" size="small" @click="$router.push('/exle')">导入excel</el-button>
          <el-button v-points="'export'" type="success" size="small" @click="handleDownload">导出excel</el-button>
          <el-button type="primary" size="small" @click="dialogVisible=true">新增员工</el-button>
        </template>
      </page-tools>
      <el-dialog

        ref="AddEmployee"
        title="新增员工"
        center
        :visible.sync="dialogVisible"
        width="40%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <add-employess @clode="dialogVisible=false" @dialogVisible="addFn" />
      </el-dialog>
      <!-- 表格 -->
      <el-card center>
        <el-table
          :default-sort="{prop: 'date', order: 'descending'}"

          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            type="index"
            prop="date"
            label="序号"
            width="68"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="150"
          />
          <el-table-column
            prop="staffPhoto"
            label="头像"
            width="150"
          >
            <template slot-scope="scope">
              <imagx :src="scope.row.staffPhoto" />

            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            width="150"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="100"
          />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            width="100"
            :formatter="formatter"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="130"
          />
          <el-table-column
            sortable
            prop="timeOfEntry"
            label="入职时间"
            width="200"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.timeOfEntry | formatTime }} </span>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            prop="correctionTime"
            label="转正时间"
            width="200"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.correctionTime | formatTime }} </span>
            </template>
          </el-table-column>
          <el-table-column

            label="操作"
            width="150"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push(`employees/detail?id=${scope.row.id}` )">查看</el-button>
              <el-button type="text" size="small" @click="distributionFn(scope.row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="removeEmploteesFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination

          :page-sizes="[5, 8, 10, 400]"
          :page-size="query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)"
          @current-change="pageFn"
          @size-change="sizeChangeFn"
        />
      </el-card>
      <!-- 权限弹窗 -->
      <el-dialog
        v-if="Permissions"
        title="分配权限"
        center
        :visible.sync="Permissions"
        width="40%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <permissions :userid="id" @ShutDown="Permissions=false" />
      </el-dialog>
    </div>
  </div></template>

<script>
import moment from 'moment'
import dayjs from 'dayjs'
import { getEmployeesAPI, delEmployeeAPI } from '@/api/employeesAPI'
import addEmployess from './addEmployyes.vue'
import Empolyees from '@/constant/employees'
import permissions from '@/layout/components/Permissions'
export default {
  name: 'Employess',
  components: {
    addEmployess, permissions
  },
  filters: {
    // 格式化入职日期的方法
    formatTime(time) {
      return time ? dayjs(time).format('YYYY-MM-DD') : '没有设置'
    }
  },
  data() {
    return {
      moment: moment,
      tableData: [], // 数据
      ind: 0,
      toadd: 0,
      List: [],
      query: {
        page: 1, // 每页
        size: 5 // 每页数量
      },
      total: '', // 员工总数量
      dialogVisible: false, // 弹窗状态
      Permissions: false, // 权限弹窗状态
      id: ''
    }
  },
  created() {
    this.getEmploees()
  },

  methods: {
    // 实现 Excel 导出功能
    handleDownload() {
      this.ak47 = this.tabsData(this.tableData)
      // 按需导入 Export2Excel 插件实现导出功能
      // Export2Excel 插件是按需导入，可以理解为是异步
      // 所以需要使用 .then 接收插件中导出对的方法
      import('@/vendor/Export2Excel').then(excel => {
        console.log(excel)
        // 处理需要导出的数据
        excel.export_json_to_excel({
          header: this.ak47.theHeaders, // 表头
          data: this.ak47.content, // 具体详细的数据
          filename: '工资表', // 导出的文件名
          autoWidth: true, // 产出的 Excel 单元格宽是否自适应
          bookType: 'xlsx' // 导出的文件格式类型
        })
      })
    },
    // 导出
    tabsData(data) {
      const map = {
        'id': '编号',
        'password': '密码',
        'username': '姓名',
        'mobile': '手机号',

        'timeOfEntry': '入职日期',
        'formOfEmployment': '聘用形式',
        'correctionTime': '转正日期',
        'workNumber': '工号',
        'departmentName': '部门',
        'staffPhoto': '头像地址'
      }
      console.log(data)
      const theHeaderkeys = Object.keys(data[0])

      const theHeaders = theHeaderkeys.map(itme => {
        return map[itme]
      })
      const content = data.map(itme => {
        return Object.values(itme)
      })
      return {
        theHeaders, content
      }
    },
    formatter(row, value, comon, ind) {
      const obj = Empolyees.hireType.find(itme => itme.id === comon)
      return obj ? obj.value : '未知'
    },
    // 子穿父更新
    addFn() {
      this.dialogVisible = false
      console.log('s是')
      this.getEmploees()
    },
    // 获取员工
    async  getEmploees() {
      const res = await getEmployeesAPI(this.query)

      this.tableData = res.data.rows
      this.total = Number(res.data.total)
      console.log(res)
    },
    // 分页
    pageFn(a) {
      this.query.page = a
      this.getEmploees()
    },
    // 每页显示数量
    sizeChangeFn(a) {
      this.query.size = a
      this.getEmploees()
    },

    // 清空表单
    dialogClose() {
      this.$refs.AddEmployee.addCancel()
    },

    // 删除员工
    async removeEmploteesFn(id) {
      const aee = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(e => e)
      if (aee === 'cancel') return this.$message('取消删除')
      const ioa = setInterval(async() => {
        this.ind++
        this.toadd++
        if (this.ind >= 5) this.ind = 0
        if (this.total < 50) {
          clearInterval(ioa)
        }
        await delEmployeeAPI(this.tableData[this.ind].id)
        // this.$message.success('删除成功')
        this.getEmploees()
      }, 100)
      await delEmployeeAPI(id)

      if (this.total >= 1 && this.tableData.length <= 1) {
        this.query.page--
      }
      this.getEmploees()
      this.$message.success('删除成功')
    },
    // 编辑员工
    distributionFn(id) {
      this.id = id
      this.Permissions = true
    }
  }
}
</script>

<style lang="scss">
.img{
  height: 100px;
  width: 100px;
}
.el-dialog__header{
  background-color: #296eea;
  .el-dialog__title{
color: aliceblue;
  }

}
</style>
